<!DOCTYPE html>
<html>
	<head>
		<title><%= title %></title>
		<link rel="stylesheet" href="/stylesheets/style.css" />
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="/javascripts/jquery-1.9.1.min.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			ul,
			li,
			ol {
				list-style-type: none;
			}
			body,
			html {
				background: #f1f1f1;
				margin:0;
				padding:0;
			}
			.article-form {
				width: 100%;
				margin: 0 auto;
				padding: 20px 20px 0;
				box-sizing: border-box;
			}
			.article-form .article-form-item {
				display: flex;
				justify-content: start;
				margin-top: 30px;
				line-height: 34px;
			}
			.article-form .article-form-item label {
				width: 160px;
				text-align: right;
				height: 34px;
				line-height: 34px;
			}
			.article-form .article-form-item input {
				height: 34px;
				line-height: 34px;
				border: 1px solid #ccc;
				border-radius: 4px;
				flex-grow: 1;
			}
			#zhuaqu {
				width: 200px;
				text-align: center;
				height: 36px;
				line-height: 36px;
				border: none;
				background: #2878ff;
				color: #fff;
				font-size: 16px;
				margin-top: 30px;
			}
			.proxyTag {
				float: right;
				width: 100px;
				height: 32px;
				line-height: 32px;
				text-align: center;
				background: #fff;
				box-shadow: 3pxpx 0px 3px rgba(0, 0, 0, 0.1);
				font-size: 14px;
				position: relative;
			}
			.proxyBox {
				width: 1000px;
				height: 0px;
				overflow: hidden;
				position: absolute;
				right: 0;
				top: 32px;
				z-index: 999;
				display: flex;
				flex-flow: column;
				background-color: #fff;
				transition: 0.2s all;
				padding: 0px 30px;
				box-sizing: border-box;
				box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);
			}
			.proxyBox > ul {
				display: flex;
				list-style-type: none;
				flex-shrink: 0;
				height: 40px;
			}
			.proxyBox > ul > li {
				height: 40px;
				line-height: 40px;
				width: 160px;
				text-align: center;
				background: #fff;
				font-size: 14px;
				cursor: pointer;
			}
			.proxyBox1,
			.proxyBox2 {
				background: #f9f9f9;
				flex-grow: 1;
				display: none;
				height: 500px;
			}
			.proxyBox1.active,
			.proxyBox2.active {
				display: flex;
				flex-flow: column;
			}
			.proxyBox > ul > li.active {
				background: #f9f9f9;
			}
			.proxyTag:hover .proxyBox {
				height: 600px;
				padding: 30px;
			}
			.proxy-form {
				flex-shrink: 0;
				height: 30px;
				margin: 10px 20px;
				display: flex;
				justify-content: start;
				position: relative;
			}
			.proxy-form span {
				background: #fff;
				color: #333;
				text-align: center;
				height: 30px;
				line-height: 30px;
				padding: 0 10px;
			}
			.proxy-form input {
				height: 30px;
				line-height: 30px;
				border: none;
				background: #fff;
				box-sizing: border-box;
				outline: none;
				padding-left: 5px;
			}
			.proxy-form a {
				color: #2878ff;
				background: #fff;
				height: 30px;
				line-height: 30px;
				padding: 0 20px;
				border-left: 2px solid #f9f9f9;
				cursor: pointer;
			}
			.proxy-form a:hover {
				background: #f6f6f6;
			}
			.proxy-form a:active {
				background: #f1f1f1;
			}
			.proxy-ip-list {
				display: flex;
				flex-grow: 1;
				overflow: auto;
				padding: 20px;
				flex-wrap: wrap;
			}
			.proxy-ip-list li {
				width: 230px;
				padding: 0 10px;
				margin-bottom: 10px;
				height: 28px;
				line-height: 28px;
				margin-right: 20px;
				background: #fff;
				text-align: left;
				display: flex;
				justify-content: space-between;
			}
			.proxy-ip-list li a {
				cursor: pointer;
			}
			.proxy-org-list {
				padding: 20px;
				flex-wrap: 1;
			}
			.proxy-org-list li {
				height: 36px;
				line-height: 36px;
				background: #fafeff;
				padding: 0 15px;
				margin-bottom: 10px;
				display: flex;
				justify-content: space-between;
			}
			.proxy-org-list li p {
				flex-grow: 1;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.proxy-org-list li span {
				flex-shrink: 0;
			}
			.proxy-org-list li a {
				flex-shrink: 0;
				margin-left: 10px;
				cursor: pointer;
			}
			.data-table {
				width: 100%;
				height: 800px;
				background: #fff;
				box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
				z-index: 1999;
				padding: 30px;
				transition: 0.2s all;
				box-sizing: border-box;
				display: flex;
				flex-flow: column;
				margin:20px auto;
			}
			.data-table > div {
				margin-top: 20px;
				overflow: auto;
				flex-grow: 1;
			}
			.data-table > .data-table-btn {
				flex-grow: 0;
				flex-shrink: 0;
			}
			#upload,
			#isIncluded {
				width: 200px;
				text-align: center;
				height: 36px;
				line-height: 36px;
				border: none;
				background: #2878ff;
				color: #fff;
				font-size: 16px;
				margin-top: 30px;
				margin-right: 20px;
				outline: none;
				flex-shrink: 0;
			}
			.data-table-btn {
				flex-shrink: 0;
				display: flex;
				justify-content: start;
			}
			#upload:hover,
			#isIncluded:hover {
				background: #3989ff;
			}
			#upload:active,
			#isIncluded:active {
				background: #0656ee;
			}
			#data-table {
				width: 100%;
				flex-grow: 1;
				overflow: auto;
			}
			#data-table th {
				height: 40px;
				background: #f1f1f1;
			}
			#data-table td {
				height: 28px;
				border-bottom: 1px solid #f1f1f1;
				position: relative;
				word-break: break-all;
				white-space: pre-wrap;
			}
			.table-content {
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
			}
			.table-content > span {
				display: block;
				width: 100%;
				height: 100%;
				line-height: 28px;
				text-align: center;
				cursor: default;
			}
			.table-content > span:hover {
				background: #f1f9ff;
			}
			.table-content > div {
				position: absolute;
				width: 800px;
				height: auto;
				box-sizing: border-box;
				padding: 20px;
				top: 28px;
				right: 0;
				background: #fafafa;
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
				display: none;
			}
			.table-content:hover > div {
				display: block;
				z-index: 9;
			}
			.addProxyListBox {
				position: absolute;
				right: 0px;
				top: 30px;
				background: #fff;
				padding: 10px;
				display: none;
			}
			.addProxyListBox textarea {
				display: block;
				outline: none;
				padding: 5px;
			}
			textarea {
				width: 840px;
				height: 200px;
				resize: none;
			}
		</style>
		<script>
			Date.prototype.format = function (fmt) {
				var o = {
					'M+': this.getMonth() + 1, //月份
					'd+': this.getDate(), //日
					'h+': this.getHours(), //小时
					'm+': this.getMinutes(), //分
					's+': this.getSeconds(), //秒
					'q+': Math.floor((this.getMonth() + 3) / 3), //季度
					S: this.getMilliseconds(), //毫秒
				};
				if (/(y+)/.test(fmt)) {
					fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
				}
				for (var k in o) {
					if (new RegExp('(' + k + ')').test(fmt)) {
						fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));
					}
				}
				return fmt;
			};
		</script>
	</head>
	<body>
		<div id="app">
			<div class="article-form">
				<h2>
					数据抓取
				</h2>
				<div style="margin-bottom: 8px; text-align: center">
					<button @click="getEnterprise()">获取数据</button>
					<button @click="startZq()">开始抓取</button>
					<button @click="startResult()">开始数据对比</button>
					<div id="status" style="height: 300px; overflow: auto; background: #fff; margin-top: 20px">
						<p v-for="(item,index) in logList" :key="index">{{ item }}</p>
					</div>
					<div class="data-table">
						<div>
							<table id="data-table">
								<thead>
									<tr>
										<th style="width: 15%">企业名称</th>
										<th style="width: 10%">email</th>
										<th style="width: 15%">电话</th>
										<th style="width: 10%">爬取email</th>
										<th style="width: 10%">爬取电话</th>
										<th style="width: 10%">爬取状态</th>
										<th style="width: 10%">备注</th>
										<th style="width: 20%">对比结果</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="(item,key) in dataList" :key="key">
										<td>{{ item.enterpriseName }}</td>
										<td>{{ item.email }}</td>
										<td>
											<span v-if="item.phone1">{{ item.phone1 }},</span>
											<span v-if="item.phone2">{{ item.phone2 }},</span>
											<span v-if="item.phone3">{{ item.phone3 }},</span>
											<span v-if="item.phone4">{{ item.phone4 }},</span>
											<span v-if="item.phone5">{{ item.phone5 }},</span>
											<span v-if="item.phone6">{{ item.phone6 }},</span>
											<span v-if="item.phone7">{{ item.phone7 }},</span>
											<span v-if="item.phone8">{{ item.phone8 }},</span>
											<span v-if="item.phone9">{{ item.phone9 }},</span>
											<span v-if="item.phone10">{{ item.phone10 }}</span>
										</td>
										<td>{{ item.webemail }}</td>
										<td>{{ item.webphone }}</td>
										<td>{{ item.isget }}</td>
										<td>{{ item.remark }}</td>
										<td>{{ item.result }}</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
			<div id="dataIframe" style="display: none;"></div>
		</div>
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					name: '',
					dataList: [],
					info: {},
					showTab: false,
					logList: ['系统初始化成功!'],
				},
				mounted() {
				},
				methods: {
                    async getEnterprise(){
                        const res = await axios.get('/getEnterprise');
						this.dataList = res.data.list;
                    },
					setLog(text){
						this.logList.unshift(text);
						if(this.logList.length>50){
							this.logList.pop();
						}
					},
					async startZq(){
						for(let i=0;i<this.dataList.length;i++){
							this.setLog("开始解析数据："+this.dataList[i].enterpriseName);
							await this.getEnterpriseContact(this.dataList[i]);
							if(i === this.dataList.length-1){
								await this.getEnterprise();
								await this.startZq();
							}
						}
					},
					async startResult(){
						for(let i=0;i<this.dataList.length;i++){
							this.setLog("开始计算结果："+this.dataList[i].enterpriseName);
							await this.getEnterpriseResult(this.dataList[i]);
						}
					},
					async getEnterpriseResult(item){
						let result = [];
						const webphone = item.webphone ? item.webphone.split(",") : null;
						const webemail = item.webemail ? item.webemail.split(",") : null;
						let phone = {};
						for(let i=1;i<11;i++){
							phone[item['phone'+i]] = item['phone'+i];
						}
						if(webemail){
							for(let t = 0;t<webemail.length;t++){
								if(webemail[t] == item.email){
									result.push(item.email);
									break;
								}
							}
						}
						if(webphone){
							for(let t=0;t<webphone.length;t++){
								if(phone[webphone[t]]){
									result.push(webphone[t]);
								}
							}
						}
						if(!result || result.length < 1){ item.result = "没有匹配的号码和邮箱" }
						else{item.result = result.join(",")};
						this.setLog("匹配结果："+item.result);
						await this.setEnterpriseResult({
							key:item.key,
							result:item.result
						});
					},
					async getWebHtml(url){
						const html = await axios.post("/getWebHtml",{url});
						return html;
					},
					async setEnterpriseContact(obj){
						const result = await axios.post("/setEnterpriseContact",obj);
						return result;
					},
					async setEnterpriseResult(obj){
						const result = await axios.post("/setEnterpriseResult",obj);
						return result;
					},
					async getEnterpriseContact(item){
						const exclude = ['www.163.com','www.189.cn','www.foxmail.com','www.hotmail.com','www.vip.163.com','www.189.cn','www.126.com','www.qq.com','www.sina.com','www.sina.cn','www.mail.sohu.com','www.88.com','www.139.com','www.189.com','www.aliyun.com','www.263.net','www.iisp.com']
						let url = '',isget;
						if(item.website && item.website !== '-'){url = item.website;}
						else if(item.email && item.email !== '-'){
							let templink = "www." + item.email.split("@")[1];
							if(exclude.indexOf(templink) === -1){url = templink;}
						}
						if(url){
							this.setLog("开始解析链接："+url);
							const body = await this.getWebHtml("http://"+url);
							if(body.data.data){
								const link_text = body.data.data.replace(/\r|\n|\r\n/g, '').replace(/(\s*)(<.+?\/{0,1}>)(\s*)/g, '$2').replace(/\s+/g," ");
								const re=/<a[^>]*href=['"]([^"]*)['"][^>]*>(.*?)<\/a>/g;
								var arr=[];
								while(re.exec(link_text)!=null){
									//如果是RegExp.$1那么匹配的就是href里的属性了!
									arr.push({href:RegExp.$1,content:RegExp.$2});
								}
								let contact_link  = '';
								for(let i=0;i<arr.length;i++){
									if(arr[i].content.indexOf("联系我们") !== -1 || arr[i].content.indexOf("联系方式") !== -1){
										let temp = arr[i].href;
										if(temp.indexOf(url) == -1){
											if(temp.indexOf("/") != 0){temp = "/"+temp;}
											contact_link = "http://"+ url + temp;
										}else{
											contact_link = temp;
										}
										break;
									}
								}
								if(contact_link){
									this.setLog("开始解析联系我们："+contact_link);
									const content = await this.getWebHtml(contact_link);
									if(content.data.data){
										item.webphone = [];
										item.webemail = [];
										item.webaddress = [];
										const content2 = content.data.data.replace(/\s*/g, '').replace(/\n/g,'').replace(/<\/?.+?>/g,"<space>").replace(/(<space>)+/g,'<space>');
										const mobile = content2.match(/[0-9]{3,4}-[0-9]{7,8}/g);
										if(mobile&&mobile.length>0){item.webphone = [...mobile]};
										const tel = content2.match(/1[3456789]\d{9}/g);
										if(tel && tel.length>0){item.webphone = [...item.webphone,...tel];}
										const email = content2.match(/([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/gi);
										if(email && email.length>0){item.webemail = [...new Set(email)];}
										const textList = content2.split("<space>");
										for(let f = 0;f<textList.length;f++){
											if(textList[f].indexOf('地址：') !== -1){
												item.webaddress.push(textList[f].split('地址：')[1]);
											};
										}
										item.webphone = [...new Set(item.webphone)];
										item.webaddress = [...new Set(item.webaddress)];
										item.webphone = item.webphone.join(",");
										item.webemail = item.webemail.join(",");
										item.webaddress = item.webaddress.join(",");
										isget = "finished";
										item.remark = "网页解析成功";
										this.setLog("解析完成，开始保存数据状态");
									}else{
										item.remark = "联系我们页面访问失败";
										isget = "failed";
										this.setLog("解析失败，开始保存数据状态");
									}
								}else{
									item.remark="未找到联系我们页面";
									isget = "failed";
									this.setLog("解析失败，开始保存数据状态");
								}
							}else{
								item.remark = "域名访问失败";
								isget = "failed";
								this.setLog("解析失败，开始保存数据状态");
							}
						}else{
							item.remark = "未找到可访问的域名";
							isget = "failed";
							this.setLog("无可用解析网址，开始保存数据状态");
						}
						item.isget = isget;
						await this.setEnterpriseContact({
							remark:item.remark,
							key:item.key,
							webphone:item.webphone,
							webemail:item.webemail,
							webaddress:item.webaddress,
							isget,
						});
					}
				},
			});
		</script>
	</body>
</html>
